<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/sweetalert.css" rel="stylesheet" />
    <style>
        html{height:100%;}
        body{
            font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
            font-size:14px;
            line-height:1.428571429;
            color:#3d3d3d;
            margin:0;
            padding:0;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .my-message{
            width:100%;
            height:100%;
        }
        .my-message .message-title{
            margin:15px;
            border-left:3px solid #FFDA44;
            padding-left:8px;
            font-weight:600
        }
        .my-message .message-detail{
            width:100%;
            height:80%;
            overflow-y:auto;
            border-top:1px solid #e5e5e5;
        }
        .my-message .load-add{
            background-color:#FFDA44;
            border-radius:0;
        }
        .my-message .load-adding{
            background-color:#DDDDDD;
        }
        .my-message .load-add:hover,.my-message .load-add:active{
            outline:none;
            border:none;
            box-shadow:none;
        }
        .message-detail-list .list-group-item{
            border:none;
            border-top:1px solid #e5e5e5;
            width:92%;
            padding-left:0;
            padding-right:0;
            margin-left:15px;
            position:relative;
        }
        .message-detail .list-group-item:first-child{
            border-top:none;
        }
        .message-detail-list dl{
            width:85%;
            margin-bottom:0;
        }
        .message-detail-list dl>dt{
            font-weight:normal;
            font-size:1.2em;
        }
        .message-detail-list dl>dd{
            margin-top:1%;
            color:#7a7c80;
        }
        .message-detail-list .del-icon{
            background: url('./images/wx_iconlist.png') no-repeat -190px -27px;
            width:22px;
            height:22px;
            position:absolute;
            top:10px;
            right:0;
        }
        .sweet-alert{
            background:#FFDA44;
            width:50%;
            height:63px;
            padding:0;
            left:25%;
        }
        .sweet-alert p{
            font-size:13px;
        }
        .sweet-alert button{
            font-size:12px;
            padding:5px 16px;
            margin:15px 2px 0 2px;
        }
        @media (min-width:375px){
            .my-message .message-title{
                margin:20px;
                border-left:3px solid #FFDA44;
                padding-left:10px;
                font-size:20px;
            }
            .message-detail-list dl>dt{
                font-weight:normal;
                font-size:1.4em;
            }
            .my-message .del-icon{
                background: url('./images/wx_iconlist_d.png') no-repeat -380px -54px;
                width:44px;
                height:44px;
            }
            .message-detail-list dl>dd{
                font-size:1.2em;
            }
        }
    </style>
</head>
<body onload="addMessage(1)">
<div class="my-message">
    <header class="message-title">我的消息 <span class="glyphicon glyphicon-refresh pull-right" aria-hidden="true"></span></header>
    <main class="message-detail">
        <ul class="list-group message-detail-list"></ul>
    </main>
    <footer>
        <button class="btn btn-block btn-lg navbar-fixed-bottom load-add">加载更多</button>
    </footer>
</div>
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./js/sweetalert.min.js"></script>
<script src="./js/hammer.min.js"></script>
<script src="./js/jquery.hammer.js"></script>
<script src="./js/my_message.js"></script>
</body>
</html>